/*
* xxxx科技有限公司版权所有（ .com/ .cn）.
* Copyright (c) 2019,   and/or its affiliates. All rights reserved.
* @Date: 2020.08.03 21:52.
* @Author
* @Description  登录页面
**/
<template>
  <div class="ca-login">
    <div v-if="!isloading">
      <img :src="bannerUrl" class="pr-login-banner" />

      <el-form :model="ruleForm" class='ca-input' label-width="80px" ref="ruleForm">
        <el-form-item label="手机">
          <el-input placeholder="输入手机号" type="text" v-model="ruleForm.phoneNum"></el-input>
        </el-form-item>

        <el-form-item label="验证码	">
          <el-input placeholder="输入验证码" type="password" v-model="ruleForm.password"></el-input>
          <span class="ca-num ca-time" v-if="showFlag">{{ getNum }}</span>
          <el-button @click="handleNumClick" class="ca-num" v-else>{{ getNum }}</el-button>
        </el-form-item>
      </el-form>

      <el-button @click="handleLoginClick" class="ca-submit" type="primary">登 录</el-button>
      <!-- 脚部 -->
      <footer-bar></footer-bar>
    </div>
  </div>
</template>

<script>
import urls from '@/api/urls'
import { getData, postData, backendPhone } from '@/api/'
import footerBar from '@/views/Footer/'

const imgUrl = require('../../assets/img/login-banner.png')

export default {
  name: 'Login',
  props: {},
  components: { footerBar },
  data() {
    return {
      isloading: true,
      count: 60, // 倒计时
      timer: null, // 定时器
      showFlag: false, // 验证展示与否
      bannerUrl: imgUrl,
      getNum: '获取验证码',
      ruleForm: {
        phoneNum: '',
        password: '',
      },
      wxCode: ''
    }
  },
  watch: {},
  mounted() {
    const searchUrl = window.location.search
    localStorage.setItem('paySearchUrl', searchUrl)
    if (searchUrl.includes('code=')) {
      this.wxCode = searchUrl.split('code=')[1].split('&state')[0]
      localStorage.setItem('wxCode', this.wxCode)
      console.log('this.wxCode--------------------', this.wxCode)
    }

    if (searchUrl.includes('id=')) {
      const activeId = window.location.search.split('=')[1] || '17' // 通过 url 获取活动 id - 查询活动装修
      const indexUrl = window.location.href
      localStorage.setItem('activeId', activeId) // 当前活动id
      localStorage.setItem('indexUrl', indexUrl) // 当前活动 首页

      this.getDescribe(activeId) // 获取活动装修信息
      console.log('activeId-indexUrl-----', activeId, indexUrl)
    }
    this.getWxCode() // 前端将code提交给后端，然后在去获取openId

  },
  methods: {
    /**
     *@Description
     *@Return 获取验证码 - 按钮 点击事件.
     **/
    handleNumClick() {
      if (this.ruleForm.phoneNum == '') {
        this.$message.warning('请输入手机号！')
        return false
      }
      getData({ id: localStorage.getItem('activeId'), phoneNumber: this.ruleForm.phoneNum }, urls.checkPhoneUrl).then(res => { // 校验手机号码归属地 - 校验手机号是否合规.
        console.log('校验手机号码归属地 - 校验手机号是否合规----', res)
        // const result = res.result.toString()
        if (res.result) {
          this.countDown() // 倒计时
          this.getNum = '已发送(60)'
          this.showFlag = true
          this.getModelCode(this.ruleForm.phoneNum) // 获取手机验证码
        } else {
          this.$message.error('非甘肃手机号码无法参加活动！')
          return false
        }
      })
    },
    /**
     *@Description
     *@Return 获取短息 验证码.
     **/
    getModelCode(num) {
      const url = `${urls.MsgCodeUrl}?mobile=${num}`
      postData({}, url).then(res => {
        if (res.code == 200) {
          console.log('获取短息验证码--------', res)
        } else {
          this.$message.warning('获取失败！')
        }
      })
    },
    /**
     *@Description
     *@Return 登录 按钮 事件监听.
     **/
    handleLoginClick() {
      // this.$router.push({ name: 'Detail', params: { phoneNum: this.ruleForm.phoneNum } })
      if (this.ruleForm.phoneNum == '') {
        this.$message.warning('请输入手机号！')
        return false
      }
      if (this.ruleForm.password == '') {
        this.$message.warning('请输入验证码！')
        return false
      }
      localStorage.setItem('phoneNum', this.ruleForm.phoneNum)
      const url = `${urls.checkCodeUrl}?code=${this.ruleForm.password}&mobile=${this.ruleForm.phoneNum}`
      postData({}, url).then(res => { // 手机 获取验证码 登入 - 校验
        if (res.code == 200) { 
          this.saveUser()
          this.$router.push({ name: 'Detail', params: { phoneNum: this.ruleForm.phoneNum } })
        } else {
          this.$message.warning('当前手机已绑定，登录失败！')
        }
        clearInterval(this.timer)
        console.log('手机 获取验证码 登入 - 校验--------', res)
      })
    },
    /**
     *@Description
     *@Return 获取活动id对应图片和说明信息.
     **/
    getDescribe(id) {
      getData({ id: id }, urls.describeUrl).then(res => {
        this.bannerUrl = res.result && res.result.activityPic || imgUrl
        // "activityId": 0,
        // "activityInfo": "string",
        // "activityInfoPic": "string",
        // "activityPic": "string",
        // "activityRemarks": "string",
        // "createTime": "2020-09-09 21:22:25",
        // "id": 1
        console.log('获取活动id对应图片和说明信息-------------', res)
      })
    },
    /**
     *@Description
     *@Return 获取回调的url给前端，然后获取code，前端将code提交给后端，然后在去获取openId.
     **/
    getWxCode() {
      if (this.wxCode) {
        this.getOpenId() // 获取 openId
      } else {
        getData({}, urls.getCodeUrl).then(res => {
          const searchUrl = window.location.search
          console.log('searchUrl----decodeURIComponent-----', res)
          this.isloading = false;
          window.location.replace(decodeURIComponent(res))
          // window.location.replace(decodeURIComponent(res))
        })
      }
    },
    getOpenId() {
      console.log('开始调用 ccb/H5/getOpenIdInfo 接口openIdUrl ---------')
      getData({ code: this.wxCode }, urls.openIdInfoUrl).then(result => {
        localStorage.setItem('openId', result.openid)
        this.getCheck(result.openid) // 校验 openid 是否登陆过
        console.log('获取openid 接口返回值.-------------', result)
      })
    },
    /**
     *@Description
     *@Return 根据 openId校验 手机号 是否登陆过.
     **/
    getCheck(id) {
      console.log('通过 openid 开始调用 ccb/H5/checkloginByOpenId 接口 检测手机是否登入过 ---------')
      getData({ OpenId: id }, urls.checkOpenIdUrl).then(res => {
        console.log('检测手机是否登入过 接口返回值.-------------', res)
        if (res.result) {
          localStorage.setItem('phoneNum', res.result.id)
          this.$router.push({ name: 'Detail', params: { phoneNum: res.result.id } })
        }
        this.isloading = false;
      })
    },
    /**
     *@Description
     *@Return 登陆成功之后 提交 openid 和 phone.
     **/
    saveUser(phone) {
      const params = {
        openid: localStorage.getItem('openId'),
        phone: phone || this.ruleForm.phoneNum
      }
      postData(params, urls.saveUserUrl).then(res => {
        console.log('陆成功之后 提交 openid 和 phone.res---', res)
      })
    },
    /**
     *@Description
     *@Return 定时器 倒计时.
     **/
    countDown() {
      this.timer = setInterval(() => {
        if (this.count < 2) {
          clearInterval(this.timer)
          this.count = 60
          this.showFlag = false
          this.getNum = '重新获取'
          return false
        } else {
          this.count--
          this.getNum = `已发送(${this.count})`
        }
        console.log(this.getNum)
      }, 1000)
    },
  }
}
</script>
<style lang="scss" scoped>
.pr-login-banner {
  width: 100%;
  height: 200px;
}
.ca-login {
  .ca-tip {
    line-height: 40px;
    text-indent: 15px;
    border-top: 1px solid rgba(221, 222, 223, 1);
    border-bottom: 1px solid rgba(221, 222, 223, 1);
    background: #fff;
  }
}
.ca-input {
  margin-top: 15px;
  padding: 0 15px;
  background: #fff;
  ::v-deep .el-form-item {
    margin-bottom: 0;
    padding: 10px 0;
  }
  ::v-deep .el-form-item:first-child {
    border-bottom: 1px solid rgba(221, 222, 223, 1);
  }
  ::v-deep input {
    line-height: 20px;
    width: 60%;
    border: none;
    outline: none;
    background: none;
  }
}
.ca-num {
  position: absolute;
  right: -10px;
  width: 105px;
  height: 40px;
  padding: 0;
  color: #0099ff;
  border: none;
  border-left: 1px solid rgba(221, 222, 223, 1);
  background: none;
}
.ca-time {
  text-indent: 10px;
}
.ca-submit {
  display: block;
  width: calc(100% - 30px);
  margin: 20px auto;
}
::v-deep input:-internal-autofill-selected {
  background: red;
}
</style>
